<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bilibili 视频详情</title>
    <style>
        @font-face {
            font-family: 'van';
            src: url(data:font/truetype;base64,{{ font_van_base64 }}) format('truetype');
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
        }

        body {
            display: inline-block;
            background-color: #ffffff;
        }

        .card,
        .up .condition,
        .video-cover .time,
        .video-cover .category {
            border-radius: 8px;
            text-align: center;
            vertical-align: middle;
        }

        .video {
            position: relative;
            display: inline-block;
            width: 750px;
            padding: 0;
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(251, 114, 153, 0.15);
            overflow: hidden;
            margin: 15px;
        }

        .video-cover {
            position: relative;
            margin-bottom: 0;
            border-radius: 0;
            overflow: hidden;
        }

        .video-cover .cover {
            width: 100%;
            height: auto;
            display: block;
            aspect-ratio: 16 / 9;
            object-fit: cover;
        }

        .video-cover .category {
            position: absolute;
            top: 12px;
            right: 12px;
            height: auto;
            border-radius: 6px;
            font-size: 22px;
            line-height: 1.4;
            background-color: rgba(0, 0, 0, 0.4);
            color: #ffffff;
            padding: 5px 10px;
            font-weight: 500;
        }

        .video-cover .time {
            position: absolute;
            bottom: 8px;
            right: 12px;
            height: auto;
            border-radius: 6px;
            font-size: 24px;
            line-height: 1.4;
            background-color: rgba(0, 0, 0, 0.6);
            color: #ffffff;
            padding: 4px 10px;
        }

        .up {
            display: flex;
            align-items: center;
            padding: 18px 25px;
            border-bottom: 1px solid #e8e8e8;
        }

        .up .avatar .img {
            width: 65px;
            height: 65px;
            border: 1px solid #eee;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 15px;
        }

        .up .info {
            padding: 0;
            flex-grow: 1;
            min-width: 0;
        }

        .up .info .name {
            display: block;
            font-size: 26px;
            font-weight: 500;
            color: #fb7299;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .video-info {
            width: 100%;
            padding: 20px 25px 20px 25px;
        }

        .video-info .title {
            font-size: 30px;
            font-weight: 600;
            line-height: 1.5;
            margin-bottom: 15px;
            color: #1a1a1a;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .video-info .data-part1 {
            display: flex;
            justify-content: space-between;
            margin-top: 12px;
            margin-bottom: 18px;
            font-size: 22px;
            color: #999;
        }

        .video-info .summary {
            margin-top: 0;
            margin-bottom: 18px;
            font-size: 25px;
            color: #666;
            line-height: 1.6;
            word-wrap: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            border-left: 3px solid #fce4ec;
            padding-left: 10px;
        }

        .video-info .ai-summary {
            margin-top: 18px;
            margin-bottom: 18px;
            padding: 15px;
            background: linear-gradient(135deg, #f5f7fa 0%, #e8f0fe 100%);
            border-radius: 8px;
            border-left: 4px solid #4285f4;
        }

        .video-info .ai-summary-title {
            font-size: 26px;
            font-weight: 600;
            color: #4285f4;
            margin-bottom: 10px;
        }

        .video-info .ai-summary-content {
            font-size: 20px;
            color: #555;
            line-height: 1.7;
            word-wrap: break-word;
        }

        .video-info .data-part2 {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 20px 15px;
            font-size: 20px;
            color: #666;
            text-align: center;
            border-top: 1px solid #e8e8e8;
            padding-top: 20px;
            margin-top: 15px;
        }

        .video-info .data-part2>span {
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 1.4;
        }

        .video-info .data-part2>span::before {
            display: block;
            font-family: 'van';
            font-size: 36px;
            margin-bottom: 6px;
            color: #fb7299;
        }

        .video-info .data-part2 .view::before {
            content: "\e6e6";
        }

        .video-info .data-part2 .dm::before {
            content: "\e6e7";
        }

        .video-info .data-part2 .like::before {
            content: "\e6e0";
        }

        .video-info .data-part2 .coin::before {
            content: "\e6e4";
        }

        .video-info .data-part2 .fav::before {
            content: "\e6e1";
        }

        .video-info .data-part2 .share::before {
            content: "";
        }

        .video-info .data-part2 .reply::before {
            content: "";
        }

        .online-count-badge-right {
            display: flex;
            align-items: center;
            gap: 5px;
            background-color: rgba(35, 169, 110, 0.12);
            color: #23a96e;
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 20px;
            font-weight: 500;
            margin-left: auto;
            white-space: nowrap;
        }

        .video .portal {
            position: relative;
            width: 100%;
            height: 70px;
            background-color: #fff8fa;
            margin-top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 22px;
            border-top: 1px solid #f0f0f0;
        }

        .video .portal .bili-logo {
            font-size: 28px;
            font-weight: bold;
            color: #fb7299;
            margin: 0 auto;
        }

        .comments {
            padding: 10px 18px 15px 18px;
            border-top: 1px solid #f0f0f0;
            margin-top: 10px;
        }

        .comments-title {
            font-size: 16px;
            font-weight: 600;
            color: #555;
            margin-bottom: 8px;
        }

        .comment-item {
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 8px;
            color: #333;
            display: flex;
            align-items: flex-start;
        }

        .comment-item:last-child {
            margin-bottom: 0;
        }

        .commenter {
            color: #fb7299;
            font-weight: 500;
            margin-right: 5px;
            white-space: nowrap;
        }

        .comment-text {
            word-break: break-all;
            flex-grow: 1;
        }

        .comment-likes {
            font-size: 12px;
            color: #999;
            margin-left: 8px;
            white-space: nowrap;
        }

        .comment-likes::before {
            font-family: 'van';
            content: "\e6e0";
            font-size: 14px;
            margin-right: 2px;
            vertical-align: -1px;
        }
    </style>
</head>

<body>
    <div class="video">
        <div class="video-cover">
            {% if cover_image_src %}
            <img class="cover" src="{{ cover_image_src }}" alt="Video Cover" />
            {% endif %}
            <span class="category">{{ video_category }}</span>
            <span class="time">{{ video_duration }}</span>
        </div>
        <div class="up">
            {% if up_info.avatar_image %}
            <span class="avatar">
                <img class="img" src="{{ up_info.avatar_image }}" alt="UP头像" />
            </span>
            {% endif %}
            <div class="info">
                <span class="name" style="color: {{ up_info.name_color }};">{{ up_info.name }}</span>
            </div>
            {% if online_count %}
            <div class="online-count-badge-right">
                <i class="van-icon van-icon-a-20"></i>
                <span>{{ online_count }} 人在线</span>
            </div>
            {% endif %}
        </div>

        <div class="video-info">
            <div class="title">{{ video_title }}</div>
            <div class="data-part1">
                <span>发布于: {{ upload_date }}</span>
                <span class="av">{{ id_number }}</span>
            </div>
            <div class="summary">{{ video_summary | replace("\n", "<br>") | safe }}</div>
            <div class="data-part2">
                <span class="view">{{ view_count }}<br>播放</span>
                <span class="dm">{{ dm_count }}<br>弹幕</span>
                <span class="like">{{ like_count }}<br>点赞</span>
                <span class="coin">{{ coin_count }}<br>投币</span>
                <span class="fav">{{ fav_count }}<br>收藏</span>
                <span class="share">{{ share_count }}<br>分享</span>
                <span class="reply">{{ reply_count }}<br>评论</span>
                <span></span>
            </div>

            {% if comments %}
            <div class="comments">
                <div class="comments-title">热门评论</div>
                {% for comment in comments %}
                <div class="comment-item">
                    <span class="commenter">{{ comment.uname }}:</span>
                    <span class="comment-text">{{ comment.text }}</span>
                    {% if comment.likes > 0 %}
                    <span class="comment-likes">{{ comment.likes }}</span>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
            {% endif %}

            {% if ai_summary %}
            <div class="ai-summary">
                <div class="ai-summary-title">🤖 AI 视频总结</div>
                <div class="ai-summary-content">{{ ai_summary | replace("\n", "<br>") | safe }}</div>
            </div>
            {% endif %}
        </div>
        <div class="portal">
            <span class="bili-logo">bilibili</span>
        </div>
    </div>
</body>

</html>